<template>
  <div class="p-messages">
    <div class="messages-app-bar">
      <div class="tabs">
        <div v-for="(tab, index) in tabs" :key="index" class="tab" :class="{ 'tab__active': activeTab === index }" @click="switchTab(index)">
          <Badge v-if="tab.tip" type="dot">
            <div class="title">
              {{ tab.title }}
            </div>
          </Badge>
          <div v-else class="title">
            {{ tab.title }}
          </div>
        </div>
      </div>
      <div class="app-bar-actions">
        <div class="app-bar-action">
          <Button text="一键已读" icon="iconfont icon-clear"></Button>
        </div>
      </div>
    </div>
    <div v-show="activeTab === 0" ref="messageContainer" class="messages-container">
      <div class="messages-container-wrapper">
        <Message v-for="(message, index) in treatedMessages" :key="index" :message="message"></Message>
      </div>
    </div>
    <EmptyStatus v-show="activeTab === 1">
    </EmptyStatus>
  </div>
</template>

<script>
import Message from '@/components/Message';
import Badge from '@/components/Badge';
import Button from '@/components/Button';
import EmptyStatus from '@/components/EmptyStatus';
import {messages} from "@/pages/messages/messages";
import BScroll from 'better-scroll';

export default {
  components: {Button, Message, Badge, EmptyStatus},
  data() {
    return {
      messages: messages,
      tabs: [
        {
          title: '消息',
          tip: false
        },
        {
          title: '通知',
          tip: true
        }
      ],
      activeTab: 0
    }
  },
  computed: {
    treatedMessages() {
      return messages.map(message => ({
        ...message,
        badge: message.badge === 0 ? '' : message.badge
      }));
    }
  },
  mounted() {
    const scroller = new BScroll(this.$refs.messageContainer);

    this.$on('hook:beforeDestroy', () => {
      scroller.destroy();
    });
  },
  methods: {
    switchTab(index) {
      if (this.activeTab !== index) {
        this.activeTab = index;
      }
    }
  }
}
</script>

<style lang="scss">
.p-messages {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  .messages-app-bar {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    height: 6rem;
    padding: 0 1.6rem;
    border-bottom: 1px solid rgb(242, 242, 242);
    .app-bar-actions {
      display: flex;
      align-items: center;
      padding-top: 1rem;
    }
    .tabs {
      display: flex;
      align-items: center;
      padding-top: 1rem;
      font-size: 1.6rem;
      .tab {
        color: rgb(102, 102, 102);
        cursor: pointer;
        .title {
        }
        &:not(:first-of-type) {
          margin-left: 2rem;
        }
      }
      .tab__active{
        cursor: default;
        .title {
          font-weight: bold;
          color: rgb(51, 51, 51);
        }
      }
    }
  }

  .messages-container {
    flex: 1 auto;
    width: 100%;
    overflow: hidden;
    .messages-container-wrapper {
      //overflow: hidden;
      //width: calc(100% + 17px);
      //height: 100%;
      //overflow-x: hidden;
      //overflow-y: scroll;
    }
  }
}
</style>